<template>
  <div class="content-wrapper">
    <AvicSplit>
      <AvicPane size="250px">
        <BpmModelTree @onModelTreeSelect="onModelTreeSelect" />
      </AvicPane>
      <AvicPane>
        <a-tabs v-model:value="tabSelected" default-active-key="1" class="avic-content-tab" @change="reloadFocusedTask">
          <a-tab-pane key="1" :force-render="true">
            <template #tab>
              <!-- <a-badge :count="todoTotalNumber" :offset="[12, 8]"> -->
              <span>
                我的待办
                <a-tag>{{ todoTotalNumber || 0 }}</a-tag>
              </span>
              <!-- </a-badge> -->
            </template>
            <TodoTask
              v-if="tabTodoTaskLoad || tabSelected == 1"
              ref="todoTask"
              :params="selectedTreeNode"
              @getBpmTaskCount="getBpmTaskCount"
            />
          </a-tab-pane>
          <a-tab-pane key="2" :force-render="true">
            <template #tab>
              <!-- <a-badge :count="toReadTotalNumber" :offset="[12, 8]"> -->
              <span>
                我的待阅
                <a-tag>{{ toReadTotalNumber || 0 }}</a-tag>
              </span>
              <!-- </a-badge> -->
            </template>
            <ToRead v-if="tabToReadLoad || tabSelected == 2" ref="toRead" :params="selectedTreeNode" @getBpmTaskCount="getBpmTaskCount" />
          </a-tab-pane>
          <a-tab-pane key="3" :force-render="true">
            <template #tab>
              <span class="tab_title">
                我的已办
                <a-tag>{{ todoTaskFinishedCnt || 0 }}</a-tag>
              </span>
            </template>
            <FinishedTask
              v-if="tabFinishedTaskLoad || tabSelected == 3"
              ref="finishedTask"
              :params="selectedTreeNode"
              @getBpmTaskCount="getBpmTaskCount"
            />
          </a-tab-pane>
          <a-tab-pane key="4" :force-render="true">
            <template #tab>
              <span class="tab_title">
                我的已阅
                <a-tag>{{ todoReadFinishedCnt || 0 }}</a-tag>
              </span>
            </template>
            <FinishedRead
              v-if="tabFinishedReadLoad || tabSelected == 4"
              ref="finishedRead"
              :params="selectedTreeNode"
              @getBpmTaskCount="getBpmTaskCount"
            />
          </a-tab-pane>
        </a-tabs>
      </AvicPane>
    </AvicSplit>
  </div>
</template>
<script lang="ts" setup>
import { searchBpmTaskCount } from '@/api/avic/bpm/BpmTaskApi';
import BpmModelTree from '../component/BpmModelTree.vue';
import ToRead from './ToRead.vue';
import FinishedTask from './FinishedTask.vue';
import FinishedRead from './FinishedRead.vue';
import TodoTask from './TodoTask.vue';
import type { treeParams } from '../types';

const tabSelected = ref<number>(1);
const tabTodoTaskLoad = ref(false);
const tabToReadLoad = ref(false);
const tabFinishedTaskLoad = ref(false);
const tabFinishedReadLoad = ref(false);
const todoTask = ref(null);
const toRead = ref(null);
const finishedTask = ref(null);
const finishedRead = ref(null);

const data = reactive({
  todoTotalNumber: '',
  toReadTotalNumber: '',
  todoTaskFinishedCnt: '',
  todoReadFinishedCnt: ''
});
const { todoTotalNumber, toReadTotalNumber, todoTaskFinishedCnt, todoReadFinishedCnt } = toRefs(data);
const selectedTreeNode = reactive<treeParams>({
  nodeId: '',
  nodeType: ''
});

onMounted(() => {
  window.bpmOperatorRefresh = () => {
    todoTask.value.bpmOperatorRefresh();
    toRead.value.bpmOperatorRefresh();
    finishedTask.value.bpmOperatorRefresh();
    finishedRead.value.bpmOperatorRefresh();
  };
});
onBeforeUnmount(() => {
  window.bpmOperatorRefresh = null;
});

function onModelTreeSelect(node: treeParams) {
  selectedTreeNode.nodeId = node.nodeId;
  selectedTreeNode.nodeType = node.nodeType;

  if (node.nodeId && node.nodeId) {
    /** 查询待办、待阅数量 */
    getBpmTaskCount();
  } else {
    data.todoTotalNumber = '0';
    data.toReadTotalNumber = '0';
    data.todoTaskFinishedCnt = '0';
    data.todoReadFinishedCnt = '0';
  }

  if (tabSelected.value !== 1) {
    tabTodoTaskLoad.value = false;
  }
  if (tabSelected.value !== 2) {
    tabToReadLoad.value = false;
  }
  if (tabSelected.value !== 3) {
    tabFinishedTaskLoad.value = false;
  }
  if (tabSelected.value !== 4) {
    tabFinishedReadLoad.value = false;
  }
}

function reloadFocusedTask(activeKey) {
  tabSelected.value = activeKey;
  if (activeKey === 1) {
    tabTodoTaskLoad.value = true;
  } else if (activeKey === 2) {
    tabToReadLoad.value = true;
  } else if (activeKey === 3) {
    tabFinishedTaskLoad.value = true;
  } else if (activeKey === 4) {
    tabFinishedReadLoad.value = true;
  }
}

function getBpmTaskCount() {
  searchBpmTaskCount(selectedTreeNode)
    .then((response) => {
      data.todoTotalNumber = response.data.todoTaskCnt || '0';
      data.toReadTotalNumber = response.data.todoReadCnt || '0';
      data.todoTaskFinishedCnt = response.data.todoTaskFinishedCnt || '0';
      data.todoReadFinishedCnt = response.data.todoReadFinishedCnt || '0';
    })
    .catch(() => {
      data.todoTotalNumber = '0';
      data.toReadTotalNumber = '0';
      data.todoTaskFinishedCnt = '0';
      data.todoReadFinishedCnt = '0';
    });
}
</script>
<style lang="less" scoped>
:deep(.ant-badge) {
  display: flex;
  align-items: center;
  .ant-badge-count {
    background-color: @primary-4;
    position: initial;
    transform: initial;
    margin-left: 4px;
    transition: none;
    transform-origin: unset;
  }
}
:deep(.ant-tabs-nav) {
  .ant-tabs-tab-btn > span {
    display: flex;
    align-items: center;
    // font-size: @font-size-lg;
  }
  .ant-tag {
    margin: 0 0 0 4px;
    padding: 0 10px;
    border-radius: 12px;
    line-height: 19px;
    background-color: @table-header-bg;
    border: @table-header-bg;
  }
  .ant-tabs-tab-active {
    .ant-tag {
      color: #fff;
      background-color: @primary-color;
      border: @primary-color;
    }
  }
}
</style>
